<template>
  <div>
    <!-- 购物车页面 -->
    <div class="cart_header">
      <!-- 头部 -->
      <div class="header_logo">
        <van-icon @click="back" name="arrow-left" size="0.4rem" />
      </div>
      <div class="header_title">商品详情页</div>
    </div>
    <div v-for="(item,index) in cartItems" :key="index" class="cart_item_container">
      <div>
        <input type="checkbox" :checked="item.checked" @change="onChange(item)" />
      </div>
      <!-- 名字 -->
      <div>{{item.name}}</div>
      <div>
        <!-- 图片 -->
        <img :src="item.pic" alt width="20%" />
        <!-- 件数 -->
        {{item.count}}
      </div>
    </div>

    <div class="zong">
      <input type="checkbox" :checked="allSelected" @change="onChangeAll()" />
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    cartItems: function() {
      return this.$store.state.cartModule.cartItems;
    },
    allSelected: function() {
      return this.$store.state.cartModule.allSelected;
    }
  },
  methods: {
    back() {
      //返回事件
      window.history.back();
    },
    onChange(item) {
      window.console.log(item);
      window.console.log(event.target.checked);
      var checked = event.target.checked;
      this.$store.dispatch("changeItemStatus", {
        checked: checked,
        id: item.id
      });
    },
    onChangeAll() {
      var checked = event.target.checked;
      this.$store.dispatch("changeAllselect", checked);
    }
  }
};
</script>

<style scoped>
.cart_header {
  width: 100%;
  height: 1rem;
  display: flex;
  justify-content: left;
  position: fixed;
  top: 0;
  background-color: #fff;
  z-index: 7;
}
.header_logo {
  width: 20%;
  margin-left: 5%;
  text-align: left;
  line-height: 1.2rem;
}
.header_title {
  width: 60%;
  text-align: center;
  line-height: 1rem;
  font-size: 0.4rem;
}
.cart_item_container {
  margin-top: 1rem;
  width: 100%;
  height: 130px;
  display: flex;
  justify-content: space-around;
}
.zong{
  position: fixed;
  bottom: 1.2rem;
}
</style>